<template>
  <view class="income">
    <scroll-view
      scroll-y="true"
      class="scroll_body"
    >
      <view class="card">
        <view class="card-title">
          <image
            src="../../../static/images/zs_icon.png"
            mode="widthFix"
            style="width: 32rpx; height: 32rpx; margin-right: 12rpx"
          ></image
          >我的收益</view
        >
        <view class="card-content">
          <view class="card-content-item">
            <view>今日收益</view>
            <view class="price">{{
              userInfo.deviceIncomeYesterday || "0"
            }}</view>
          </view>
          |
          <view class="card-content-item">
            <view>今日退款</view>
            <view class="price">{{ "0" }}</view>
          </view>
        </view>
        <!-- <view class="charts-box">
          <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
        </view> -->
      </view>

      <!-- <view class="card" style="margin-top: 20rpx">
        <view class="card-content">
          <view class="card-content-item">收益明细</view>
        </view>
        <view class="card-content">
          <view class="card-content-item">退款明细</view>
        </view>
      </view> -->
 
      <div class="details-card">
        <div class="detail-item" @click="goEarnings">
          <image src="../images/symx_icon.png" alt="收益明细" class="icon" />
          <span>收益明细</span>
        </div>
        <div class="divider"></div>
        <div class="detail-item" @click="goRefundDetails">
          <image src="../images/tkmx_icon.png" alt="退款明细" class="icon" />
          <span>退款明细</span>
        </div>
      </div>


    </scroll-view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue'
import { formatDate } from '../../../utils/common'
import useStore from '../../../stores/index'
// 定义 props 类型（可根据实际业务扩展）
interface UserInfo {
  [key: string]: any;
}

const store = useStore()
const props = defineProps<{ userInfo: UserInfo }>()
const userInfo = computed(() => store.userInfo)

// data 属性转换为响应式变量
const walletLog = ref<any[]>([])
const isEmpty = ref(true)
const opts = reactive({
  color: [
    "#FFD400",
    "#FF9400",
  ],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: "group",
      width: 12,
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
    },
  },
})
const chartData = reactive({
  categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
  series: [
    {
      name: "目标值",
      data: [35, 36, 31, 33, 13, 34],
    },
    {
      name: "完成量",
      data: [18, 27, 21, 24, 6, 28],
    },
  ],
})
interface FormData {
  ypageNum: number;
  ypageSize: number;
  total: number;
}
const formData = reactive<FormData>({
  ypageNum: 1,
  ypageSize: 15,
  total: 0,
})
const loadStatus = ref("loadmore")

// 通过 getCurrentInstance 获取 proxy，以便调用全局方法（如 $http）
const { proxy } = getCurrentInstance()!

// 方法转换
const goEarnings = () => {
  uni.navigateTo({
    url: "/pages/order/earnings",
  })
}

const goRefundDetails = () => {
  uni.navigateTo({
    url: "/pages/views/refundDetails",
  })
}


// 触底加载更多
// const reachBottom = () => {
//   if (walletLog.value.length < formData.total) {
//     formData.ypageNum += 1
//     getWalletLog()
//   }
// }

// 钱包明细请求
// const getWalletLog = () => {
//   const today = formatDate(new Date(), "YYYY-MM-DD")
//   // proxy.$http("money.walletLog", {
//   //   ...formData,
//   //   accountTrend: "1",
//   //   amountType: "1",
//   //   businessType: "9",
//   //   startTime: today + " 00:00:00",
//   //   endTime: today + " 23:59:59",
//   // }).then((res: any) => {
//   //   if (res.code === 200) {
//   //     walletLog.value = walletLog.value.concat(res.rows)
//   //     isEmpty.value = walletLog.value.length === 0
//   //     formData.total = res.total
//   //     loadStatus.value =
//   //       res.rows.length < formData.ypageSize ? "nomore" : "loadmore"
//   //   }
//   // })
// }

// mounted 钩子
// onMounted(() => {
//   getWalletLog()
// })
</script>


<style scoped lang="scss">
.details-card {
  box-sizing: border-box;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 32rpx;
  width: calc(100% - 40rpx);
  margin: 0 auto;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
  font-size: 16px;
}

.icon {
  width: 68rpx;
  height: 68rpx;
  margin-bottom: 16rpx;
}

.divider {
  width: 2rpx;
  height: 60rpx;
  background-color: #f5f5f8;
}

.income {
  // background-color: #f5f5f5;
  height: 100vh;
  width: 100%;
  // padding: 20rpx;
  overflow: hidden;
  .card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    width: calc(100% - 40rpx);
    margin: 0 auto;
    margin-bottom: 20rpx;

    .card-title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 32rpx;
    }
    .card-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 24rpx;
      color: #222;
      .price {
        font-size: 32rpx;
        // color: #ff9900;
        font-weight: bold;
        margin-top: 16rpx;
        font-family: DIN Alternate, DIN Alternate;
      }
    }
    // width: calc(100% - 40rpx);
    // margin: 24rpx auto;
  }
  .charts-box {
    width: 100%;
    height: 320rpx;
  }
}

.scroll_body {
  height: calc(100vh - 188rpx);
  .titles {
    width: 100%;
    @include flexRS;
  }
}
</style>
